<template>
  <view class="main-page">
    
    <view class="main-pos">
        
        <view class="tags-wrapper">
          <view class="tag tag-1">{{labels[0]}}</view>
          <view class="tag tag-2" style="margin-left: auto;">{{labels[1]}}</view>
          <view class="tag tag-3">{{labels[2]}}</view>
        </view>
        
        <view
          class="bottom-pos"
          :style="{'background-image':`url(${staticImgs.bottomBg})`}"
        >
          
          <view class="prev-btn" @click="prevHandle">
            <image class="img" :src="staticImgs.prevBtn" mode="widthFix"></image>
          </view>
          <view class="content-box">
            <template v-if="info.status === 0">
              <view class="txt" :data-text="info.tit"></view>
              <template v-if="info.isFirst || isPay">
                <view class="do-btn" @click="toDetail">
                  <image class="img" :src="staticImgs.doBtn" mode="widthFix"></image>
                </view>
              </template>
              <template v-else>
                <view class="lock-btn" @click="toLockDetail">
                  <image class="img" :src="staticImgs.lockBtn" mode="widthFix"></image>
                </view>
              </template>
            </template>
            <template v-else>
              <view v-if="info.shortRes" class="res-p" :data-text="info.shortRes"></view>
              <view class="res-btn" @click="toRes">点击查看结果 ></view>
            </template>
            
          </view>
          <view class="next-btn" @click="nextHandle">
            <image class="img" :src="staticImgs.nextBtn" mode="widthFix"></image>
          </view>
        </view>
    </view>
    
    <view class="back-btn" @click="backHandle" v-if="isPay">
      <image class="img" :src="staticImgs.back" mode="widthFix"></image>
    </view>
  
  </view>
</template>

<script>
  export default{
    props:{
      sclId:'',
      info:{
        type:Object,
        default:()=>{}
      },
      isPay:false,
    },
    data(){
      return {
        staticImgs: {
          back: this.imgBaseURL + "/scl/checkup-sexuality/main/back-btn.png",
          buyMask: this.imgBaseURL + "/scl/checkup-sexuality/main/buy-mask-bg.png",
          buyBtn: this.imgBaseURL + "/scl/checkup-sexuality/main/buy-btn.png",
          buyBg: this.imgBaseURL + "/scl/checkup-sexuality/main/box-img.png",
          bottomBg:this.imgBaseURL + "/scl/checkup-sexuality/main/nv-bottom.png",
          prevBtn:this.imgBaseURL + "/scl/checkup-sexuality/main/prev-btn.png",
          nextBtn:this.imgBaseURL + "/scl/checkup-sexuality/main/next-btn.png",
          lockBtn:this.imgBaseURL + "/scl/checkup-sexuality/main/lock-btn.png",
          doBtn:this.imgBaseURL + "/scl/checkup-sexuality/main/do-btn.png",
          
        },
        labels:[],
      }
    },
    mounted() {
      this.$u.api.sclSexualOrientationLabel().then(({data:res})=>{
        this.labels = res.data.slice(-3)
      })
    },
    methods:{
      prevHandle(){
        this.$emit('prev')
      },
      nextHandle(){
        this.$emit('next')
      },
      backHandle(){
        uni.reLaunch({
          url:'/pages/sclList/sclList'
        })
      },
      toDetail(){
        this.$emit('to')
      },
      toLockDetail(){
        
      },
      toRes(){
        
        let url = '/subcontractorB/pages/sclResult/sclResult?id=' + this.info.sclExaminationReprotId + '&sclReportType=3'
        uni.reLaunch({
          url
        })
        
      }
    }
  }
</script>

<style lang="scss" scoped>
  
  @keyframes shakeboxL {
    0% {
      transform: translateZ(0);
    }
  
    15% {
      transform: translate3d(-5px,0, 0);
    }
  
    25% {
      transform: translate3d(0, 0, 0);
    }
  
    45% {
      transform: translate3d( -5px,0, 0);
    }
  
    55% {
      transform: translate3d(0, 0, 0);
    }
  
    65% {
      transform: translate3d(-5px,0, 0);
    }
  
    75% {
      transform: translate3d(0, 0, 0);
    }
  
    85% {
      transform: translate3d(-5px,0, 0);
    }
  
    100% {
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes shakeboxR {
    0% {
      transform: translateZ(0);
    }
      
    15% {
      transform: translate3d(5px,0, 0);
    }
      
    25% {
      transform: translate3d(0, 0, 0);
    }
      
    45% {
      transform: translate3d( 5px,0, 0);
    }
      
    55% {
      transform: translate3d(0, 0, 0);
    }
      
    65% {
      transform: translate3d(5px,0, 0);
    }
      
    75% {
      transform: translate3d(0, 0, 0);
    }
      
    85% {
      transform: translate3d(5px,0, 0);
    }
      
    100% {
      transform: translate3d(0, 0, 0);
    }
  }
  
  .main-page{
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: flex-end;
    width: 100vw;
    box-sizing: border-box;
    
    .main-pos{
      margin: auto;
      margin-bottom: 890rpx;
    }

    
    .tags-wrapper{
      width: 100vw;
      box-sizing: border-box;
      
      display: flex;
      flex-direction: column;
      
      .tag{
        background: linear-gradient( 90deg, #FFFFFF 0%, rgba(255,255,255,0.62) 50%, #FFFFFF 100%);
        box-shadow: 0rpx 2rpx 10rpx 0rpx #3575B6;
        border-radius: 35rpx;
        
        width: fit-content;
        
        padding: 9rpx 20rpx;
        
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #062442;
        line-height: 42rpx;
        text-align: center;
        font-style: normal;
      }
      .tag-1{
        margin-left: 36rpx;
      }
      .tag-2{
        margin-right: 46rpx;
      }
      .tag-3{
        margin-left: 44rpx;
      }
      
    }
    .bottom-pos{
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      
      height: 950rpx;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 246rpx;
      
      box-sizing: border-box;
      
      .prev-btn,.next-btn{
        width: 140rpx;
        // margin: 40rpx;
        margin-bottom: 86rpx;
        // height: 90rpx;
        
        .img{
          width: 100%;
          height: 100%;
        }
      }
      
      .prev-btn{
        animation: shakeboxL 8s linear infinite;
        -webkit-animation: shakeboxL 8s linear infinite;
      }
      .next-btn{
        animation: shakeboxR 8s linear infinite;
        -webkit-animation: shakeboxR 8s linear infinite;
      }
      
      .content-box{
        // border: 1px solid red;
        box-sizing: border-box;
        width: 438rpx;
        height: 400rpx;
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        
        >.txt{
          width: fit-content;
          margin-bottom: 20rpx;
          position: relative;
          // margin: auto;
          
          &::before, &::after {
            content: attr(data-text);
              
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 46rpx;
            color: #0A2E46;
            line-height: 65rpx;
            text-align: center;
            font-style: normal;
          }
          &::before {
              -webkit-text-stroke: 8rpx #fff;
          }
          &::after {
              position: absolute;
              top: 0;
              left: 0;
          }
        }
        
        >.do-btn{
          width: 270rpx;
          height: 88rpx;
          
          .img{
            width: 100%;
            height: 100%;
          }
        }
        
        >.lock-btn{
          width:270rpx;
          height: 88rpx;
          
          .img{
            width: 100%;
            height: 100%;
          }
        }
        
        
        >.res-p{
          // font-family: PingFangSC, PingFang SC;
          // font-weight: 500;
          // font-size: 50rpx;
          // color: #FFFFFF;
          // line-height: 66rpx;
          // text-shadow: 0px 7px 10px #4275B7;
          // text-stroke: 2px #291473;
          // text-align: center;
          // font-style: normal;
          // -webkit-text-stroke: 2px #291473;
          
          
          width: fit-content;
          margin-bottom: 20rpx;
          position: relative;
          // margin: auto;
          
          &::before, &::after {
            content: attr(data-text);
              
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 50rpx;
            color:  #fff;
            line-height: 65rpx;
            text-align: center;
            font-style: normal;
          }
          &::before {
              -webkit-text-stroke: 8rpx #291473;
          }
          &::after {
              position: absolute;
              top: 0;
              left: 0;
          }
        }
        
        >.res-btn{
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #FFFFFF;
          line-height: 42rpx;
          text-align: center;
          font-style: normal;
          opacity: .9;
        }
        
      }
      
    }
  }
  

  

  
  .back-btn{
    position: fixed;
    top: 16vh;
    right: 0;
    
    .img{
      width: 120rpx;
      height: 88rpx;
    }
  }
</style>